<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/css/amazeui.min.css"/>
    <title>首页</title>
    <style type="text/css">
        .am-container {
            width: 1000px !important;
            max-width: none;
        }
    </style>
</head>
<body>
<!-- header start -->
<header class="am-topbar">
    <div class="am-container">
        <h1 class="am-topbar-brand">
            <a href="/">走失宠物搜救系统</a>
        </h1>

        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
            <ul class="am-nav am-nav-pills am-topbar-nav">
                <li class="am-active"><a href="#">首页</a></li>
            </ul>
            <div class="am-topbar-right">
                <c:if test="${!empty user.id}">
                    <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
                        <button
                                class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle"
                                data-am-dropdown-toggle>
                            操作 <span class="am-icon-caret-down"></span>
                        </button>
                        <ul class="am-dropdown-content">
                            <li><a href="${pageContext.request.contextPath}/my/user/toChildrenEdit.do">发起搜救</a></li>
                            <li><a href="${pageContext.request.contextPath}/my/user/userEvent.do">我的发布</a></li>
                            <li><a href="${pageContext.request.contextPath}/account/logout.do">退出</a></li>
                        </ul>
                    </div>
                </c:if>
            </div>
            <c:if test="${empty user.id}">
                <div class="am-topbar-right">
                    <a href="${pageContext.request.contextPath}/account.jsp"
                       class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">注册</a>
                </div>
                <div class="am-topbar-right">
                    <a href="${pageContext.request.contextPath}/login.jsp"
                       class="am-btn am-btn-secondary am-topbar-btn am-btn-sm">登录</a>
                </div>
            </c:if>
        </div>
    </div>
</header>
<!-- header end -->
<div class="am-container">
    <div class="am-g">
        <div class="am-u-sm-12">
            <form action="${pageContext.request.contextPath}/event/search.do" method="post">
                <input type="text" name="name" placeholder="输入宠物信息">
                <input type="submit" value="搜索"/>
            </form>
            <table class="am-table am-table-striped am-table-hover table-main am-text-nowrap">
                <thead>
                <tr>
                    <th>走失宠物姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>失踪地点</th>
                    <th>失踪时间</th>
                    <th>负责工作人员</th>
                    <th>详情</th>
                </tr>
                </thead>
                <tbody id="eventTable">
                <c:forEach items="${eventList}" var="event">
                    <tr>
                        <td>${event.children.name }</td>
                        <td>${event.children.age }岁</td>
                        <c:if test="${event.children.sex==1}">
                            <td>男孩</td>
                        </c:if>
                        <c:if test="${event.children.sex==2}">
                            <td>女孩</td>
                        </c:if>
                        <td>${event.event_point }</td>
                        <td><fmt:formatDate value="${event.event_time }"
                                            pattern="yyyy-MM-dd HH:mm"/></td>
                        <td>${event.police_name }</td>
                        <td>
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a
                                            href="${pageContext.request.contextPath}/event/eventDetail.do?id=${event.id }"
                                            class="am-btn am-btn-default am-btn-xs am-text-secondary">
                                        <span class="am-icon-pencil-square-o"></span> 详情
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <ul class="am-pagination"></ul>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/js/amazeui-pagination.js"></script>
<script type="text/javascript">
    var pagination = new Pagination({
        wrap: $('.am-pagination'), // 存放分页内容的容器
        count: ${total}, // 总页数
        current: 1, // 当前的页数（默认为1）
        prevText: '上一页', // prev 按钮的文本内容
        nextText: '下一页', // next 按钮的文本内容
        callback: function (page) { // 每一个页数按钮的回调事件
            // page 为当前点击的页数
            console.log("page=" + page);
        },
        // 会发送 get 请求到 /api/xxx/page/page_number
        // 或者你可以写成 /api/xxx?page= 插件发送的 url 为 /api/xxx?page=page_number
        // page_number 为当前的页数
        ajax: {
            url: '${pageContext.request.contextPath}/getEvent.do?pageNum=',
            // 你可以传入你需要的 queryString
            data: {},
            success: function (result) {
                // result 成功返回的结果
                $('#eventTable').empty();
                var data = $.parseJSON(result);
                $.each(data, function (index, content) {
                    if (content.children.sex == 1) {
                        var str = '<td>男孩</td>';
                    } else {
                        var str = '<td>女孩</td>';
                    }
                    $('#eventTable').append('<tr><td>' + content.children.name + '</td>' + '<td>' + content.children.age + '岁</td>' + str + '<td>' + content.event_point + '</td>' + '<td>' + content.event_time + '</td>' + '<td>' + content.police_name + '</td>' + '<td><div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs"><a href="${pageContext.request.contextPath}/event/eventDetail.do?id=' + content.id + '"class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 详情</a></div></div></td></tr>');
                });
            },
            error: function (error) {
                // error 失败返回的 message
                console.log("error=" + error);
            }
        }
    });
</script>
</body>
</html>